'use client'
// 标签组件
import Image from "next/image";
import { useEffect, useState } from 'react'

export default function Tags() {
  const [tag, setTag] = useState(null)
  const [tagsList, setTagsList] = useState<Array<string>>([])

  useEffect(() => {
    setTagsList(['html', 'css'])
  }, [])

  const TagList =  () => {
    return(
      <div>
        {
          tagsList.map((tag, index) => (
            <span key={index} className="rounded-lg px-3 py-1 mr-2 bg-sky-100 text-sky-500 cursor-pointer">{ tag }</span>
          ))
        }
      </div>
    )
  }

  return (
    <div className="w-72 bg-white p-6 rounded-lg mt-4">
      <div className="flex items-center mb-2">
        <Image 
          width={32} 
          height={32}
          src="/static/tag.png"
          alt=""
        />
        <span className="pl-2">标签</span>
      </div>
      <TagList />
    </div>
  )
}